<template>
  <div class="userList-nav">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="table-nav">
      <el-alert title="注意：只允许为第三级分类设置相关参数" type="warning" show-icon :closable="false" center />
      <br />
      <div>
        <span>选择商品分类：</span>
        <!-- cascader没有回显的时候设置key值 刷新列表 -->
        <el-cascader v-model="classifyList" :options="catList" :props="props" size="large" :key="cascaderKey"
          :show-all-levels="false" @change="changeClassify" />
      </div>
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="动态参数" name="many">
          <classify-page title="动态参数" :id="typeId" typeName="many" />
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <classify-page title="静态属性" :id="typeId" typeName="only" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div></div>
  </div>
</template>
    
<script setup>
import { getCategories } from "@/api/goods";
import { reactive, ref } from "vue";
import classifyPage from "@/components/commdity/ClassifyPage.vue";
let cascaderKey = ref(0);
let classifyList = reactive([]);
let catList = reactive([]);
let activeName = ref("many");
let typeId = ref(0);
(async () => {
  let res = await getCategories();
  catList.push(...res.data);
})();
const props = {
  expandTrigger: "hover",
  value: "cat_id",
  label: "cat_name",
  children: "children",
  checkStrictly: true,
};

const changeClassify = () => {
  if (classifyList.length < 3) {
    classifyList.splice(0);
    cascaderKey.value++;
    typeId.value = -1;
    return;
  } else {
    cascaderKey.value++;
    typeId.value = classifyList[2];
    return;
  }
};
</script>
    
<style lang="scss" scoped>
.userList-nav {
  position: relative;
  width: 100%;
  // height: 100%;
  overflow: auto;

  .table-nav {
    position: absolute;
    width: 100%;
    // max-height: 100%;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 10px;
    background-color: white;
    overflow: hidden;

    .el-table {
      margin: 20px 0;
    }

    .pagination-nav {}
  }
}
</style>